<script setup>
import { ref, computed, defineProps, defineEmits } from "vue";
const props = defineProps(["meta", "vm"]);
const { meta, vm } = props;
const modelName = meta.model;
const model = vm.getModel(modelName);
const modelRef = ref();
if (model) {
  model.$ref = modelRef;
}

const columns = computed(() => {
  if (meta && meta.items) {
    let cols = meta.items.filter(x => {
      return x.visible;
    });
    return cols;
  } else {
    return [];
  }
});

const pagerDisabled = computed(() => {
  let rows = model.data?.rows;
  if (rows && rows.length > 0) {
    return false;
  } else {
    return true;
  }
});

function handleSizeChange(pageSize) {
  model.pageSize = pageSize;

  vm.execute("list", {
    "name": modelValue.name
  });
}

function handleCurrentChange(pageIndex) {
  model.pageIndex = pageIndex;
  vm.execute("list", {
    "name": model.name
  });

}

function openDetail(data) {
  const { id } = data;
  vm.openDetail({ id });
}
</script>
<template>
  <div v-if="model != null">
    <el-table ref="modelRef" :data="model.data.rows" :border="true" height="450px" :stretch="true"><!--:stretch="true" -->
      <el-table-column type="selection" width="40" />
      <!-- <el-table-column type="index" width="50" /> -->
      <el-table-column v-for="col in columns" :prop="col.name" :label="col.title" :width="col.width" />
      <el-table-column fixed="right">
        <template #default="scope" lable="操 作">
          <el-link @click="openDetail(scope.row)">明 细</el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :page-sizes="[10, 20, 40, 50, 100]" background :small="small" :disabled="pagerDisabled"
      layout="prev, pager, next, total, sizes, jumper" :total="model.data.total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange"></el-pagination>
  </div>
  <div v-else>
    <el-text class="mx-1" type="danger">
      data-model '{{ modelName }}' is null;
    </el-text>
  </div>
</template>